<template>
  <div class="step_box">
    <div class="step_item">
      <div
        v-for="(item, index) in stepArr"
        :key="index"
        class="step_item_box"
        :class="{ blue: blueColor === item.id }"
        @click="stpeBtn(item.id)"
      >
        {{ item.text }}
        <div class="step_triangle">
          <img src="../../../assets/img/arrow.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CarpiaoPage',
  props: {
    stepArr: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      blueColor: 0
    }
  },
  methods: {
    // 使用index关联起来
    stpeBtn(id) {
      this.blueColor = id
      this.$emit('changeId', id)
    }
  }
}
</script>

<style scoped>
.Carpiao_container {
  height: 100%;
  width: 100%;
}
.step_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.step_item {
  width: 100%;
  height: 20vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.step_item_box {
  font-size: 18px;
  width: 18%;
  height: 40%;
  background-color: #b3b3b4;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: aliceblue;
  position: relative;
}

/* 步骤圆形的样式 */
.blue {
  background-color: #6f9aec;
}

.step_triangle {
  width: 15%;
  height: 40%;
  position: absolute;
  right: -55%;
  top: 30%;
}
@media screen and (max-width: 890px) {
  .step_item_box {
    font-size: 18px;
    width: 18%;
    height: 40%;
    background-color: #b3b3b4;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;
    position: relative;
  }
  .step_triangle {
    width: 15%;
    height: 40%;
    position: absolute;
    right: -55%;
    top: 30%;
  }
}
.step_triangle img {
  width: 100%;
  height: 100%;
}
.step_item_box:last-child .step_triangle {
  width: 0px;
  height: 0px;
}
</style>
